<template>
  <view class="confetti-container">
    <view 
      v-for="(confetti, index) in confettis" 
      :key="index"
      class="confetti"
      :style="{
        left: confetti.left + 'px',
        backgroundColor: confetti.color,
        width: confetti.size + 'px',
        height: confetti.size + 'px',
        transform: `rotate(${confetti.rotation}deg)`,
        animation: `fall ${confetti.duration}s linear ${confetti.delay}s forwards`
      }"
    ></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      confettis: [],
      colors: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722']
    }
  },
  methods: {
    play() {
      // 清空现有纸屑
      this.confettis = []
      
      // 创建新纸屑
      const systemInfo = uni.getSystemInfoSync()
      for (let i = 0; i < 100; i++) {
        this.confettis.push({
          left: Math.random() * systemInfo.windowWidth,
          color: this.colors[Math.floor(Math.random() * this.colors.length)],
          size: Math.random() * 20 + 10,
          rotation: Math.random() * 360,
          duration: Math.random() * 2 + 1,
          delay: Math.random() * 0.5
        })
      }
      
      // 3秒后清除
      setTimeout(() => {
        this.confettis = []
      }, 3000)
    }
  }
}
</script>

<style lang="scss" scoped>
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
}

.confetti {
  position: absolute;
  border-radius: 50%;
  opacity: 0.8;
}

@keyframes fall {
  0% {
    transform: translateY(-100rpx) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(150vh) rotate(720deg);
    opacity: 0;
  }
}
</style>